<template>
  <view>
    <view class="category">
      <!-- 左边分类 -->
      <scroll-view class="category_left" scroll-y="true">
        <!-- 左边 -->
        <view :class="['category_title', [leftActive == index ? 'active' : '']]" v-for="(cateGories, index) in cateGoriesData" :key="cateGories.cat_id" @tap="showRight(index)">
          <!-- 大分类名称 -->
          {{ cateGories.cat_name }}
        </view>
      </scroll-view>
      <!-- 右边详情 -->
      <scroll-view class="category_right" scroll-y="true">
        <!-- 右边 -->
        <view class="categories" v-for="(rightCateGories, index) in rightData" :key="rightCateGories.cat_id">
          <view class="categories_title">
            <text class="xie">/</text>
            <text class="categories_name">{{ rightCateGories.cat_name }}</text>
            <text class="xie">/</text>
          </view>
          <view class="categories_children" v-for="(rightChildren, index) in rightCateGories.children" :key="rightChildren.cat_id">
            <navigator :url="'../goods_list/goods_list?query=' + rightChildren.cat_name + '&cid=' + rightChildren.cat_id">
              <image :src="rightChildren.cat_icon" mode="widthFix"></image>
              <text class="name">{{ rightChildren.cat_name }}</text>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  onLoad() {
    var _me = this;
    _me.getNavData();
  },
  data() {
    return {
      cateGoriesData: {},
      rightData: {},
      leftActive: 0
    };
  },
  methods: {
    /* 获取导航栏内容 */
    getNavData() {
      var _me = this;
      uni.request({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
        success(e) {
          // console.log(e);
          _me.cateGoriesData = e.data.message;
          // console.log(_me.cateGoriesData);
          _me.rightData = _me.cateGoriesData[0].children;
          // console.log(_me.rightData);
        }
      });
    },
    /* 切换右边内容 */
    showRight(index) {
      var _me = this;
      _me.leftActive = index;
      _me.rightData = _me.cateGoriesData[index].children;
    }
  }
};
</script>

<style lang="scss">
.category {
  .category_left {
    float: left;
    // 宽为 整个页面的 1/4
    width: calc(100vw * 0.25);
    // 高为 整个视图 - 导航栏 - tabbar
    height: calc(100vh - var(--window-top) - var(--window-bottom));
    background-color: #f4f4f4;
    /* 左边小标题 */
    .category_title {
      width: 100%;
      // 高为 左边高的 10%
      height: 10%;
      // 高最小为 50rpx
      min-height: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 35rpx;
      border: 2rpx solid #d2d2d2;
      color: #000000;
      &.active {
        color: #ff0000;
        border-left: 6rpx solid #ff0000;
      }
    }
  }
  .category_right {
    float: right;
    // 宽为 整个页面的 3/4
    width: calc(100vw * 0.75);
    // 高为 整个视图 - 导航栏 - tabbar
    height: calc(100vh - var(--window-top) - var(--window-bottom));
    background-color: #ffffff;
    .categories {
      .categories_title {
        width: 100%;
        margin: 20rpx 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50rpx;
        .xie {
          color: #d2d2d2;
          padding: {
            left: 30rpx;
            right: 30rpx;
          }
        }
        .categories_name {
          color: #000000;
        }
      }
      .categories_children {
        display: inline-block;
        width: calc(100% / 3);
        navigator {
          width: 100%;
          height: 100%;
          image {
            width: 80%;
            height: 80%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
          }
          .name {
            width: 80%;
            height: 20%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30rpx;
          }
        }
      }
    }
  }
}
</style>
